<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>注册</title>
<link rel="stylesheet" href="assets/libs/particles/css/style.css">
<link rel="stylesheet"
	href="assets/libs/sweetalert2/sweetalert2.min.css">
<link rel="stylesheet" href="assets/css/base.css">
<link rel="stylesheet" href="assets/css/login.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/MyJS.js" type="text/javascript" charset="utf-8"></script>
<script src="js/YZM.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<!-- particles.js container -->
	<div id="wrapper">
		<div>
			<img src="assets/img/head.png" />
			<h2>书山有路勤为径 学海无涯苦作舟</h2>
		</div>
		<nav class="switch_nav">
			<a href="login.jsp" id="switch_login" class="switch_btn">登陆</a> <a
				href="javascript:;" id="switch_signup" class="switch_btn">注册</a>

			<div class="switch_bottom" id="switch_bottom"></div>
		</nav>
	</div>

	<form class="form-horizontal" method="post" action="${pageContext.request.contextPath}/user/add" id="registerform">
        用户名：<input type="text" name="username"><br><br><br>
        密码：<input type="password" name="password" id="inpPWD" maxlength="10" placeholder="6-10位数字&字母组合登录密码"><br><br><br>
        确认密码：<input type="password" name="password2" id="inpPWD2" maxlength="10" placeholder="6-10位数字&字母组合登录密码"><br><br><br>
        <div class="form-group" style="padding: 0 0 0 37%;">
            <label for="inpYZM" style="width: 120px"
                   class="col-sm-1 control-label">验证码：</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="inpYZM"
                       placeholder="请输入验证码">
            </div>
            <div class="col-sm-3">
                <canvas id="canvas" width="100" height="30"></canvas>
            </div>
            <div class="col-sm-4"></div>
        </div>
        <input type="submit" value="注册">
	</form>
	<div class="container">
	</div>
	<script src="assets/libs/jquery-1.12.4/jquery.min.js"></script>
	<script src="assets/libs/sweetalert2/sweetalert2.min.js"></script>
	<script src="assets/libs/particles/particles.min.js"></script>
	<script src="assets/libs/particles/js/app.js"></script>
	<!-- <script src="../assets/libs/particles/js/lib/stats.js"></script> -->
	<script type="text/javascript">
	function go() {
		var b = false;
		var pwd1 = $(#"inpPWD");
		var pwd2 = $(#"inpPWD2");
        var yanzhenma = $(#"canvas")
		var jiaoyan = $(#"inpYZM")

			if (pwd1== pwd2) {
				b = true;
			} else {
				b = false;
			}
		if (b==true && yanzhenma==yanzhen) {
			alert("注册成功")
			$("#registerform").submit();
		} else {
			alert("注册失败")
		}
	}


	</script>
	<script>
		var count_particles, stats, update;
		stats = new Stats;
		stats.setMode(0);
		stats.domElement.style.position = 'absolute';
		stats.domElement.style.left = '0px';
		stats.domElement.style.top = '0px';
		document.body.appendChild(stats.domElement);
		count_particles = document.querySelector('.js-count-particles');
		update = function() {
			stats.begin();
			stats.end();
			if (window.pJSDom[0].pJS.particles
					&& window.pJSDom[0].pJS.particles.array) {
				count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
			}
			requestAnimationFrame(update);
		};
		requestAnimationFrame(update);
	</script>
	<script>
		$(".download_btn").click(function() {
			if ($(".QRcode").css("display") == "none") {
				$(".QRcode").show();
				$(".download_btn").text("关闭二维码");
			} else {
				$(".QRcode").hide();
				$(".download_btn").text("下载App");
			}
		});
	</script>
	<script>
		$(function() {
			//为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
			// $("form :input.required").each(function () {
			//     //通过jquery api：$("HTML字符串") 创建jquery对象
			//     var $required = $("<strong class='high'>*</strong>");
			//     //添加到this对象的父级对象下
			//     $(this).parent().append($required);
			// });
			// var errorMsg = $(".error-msg").text();
			//为表单元素添加失去焦点事件
			$("form :input")
					.blur(
							function() {
								var $parent = $(this).parent();
								$parent.find(".msg").remove(); //删除以前的提醒元素（find()：查找匹配元素集中元素的所有匹配元素）
								//验证姓名
								if ($(this).is("#name")) {
									var nameVal = $.trim(this.value);
									var regName = /[~#^$@%&!*()<>:;'"{}[]  ]/;
									if (nameVal == "" || nameVal.length < 2
											|| regName.test(nameVal)) {
										var errorMsg = " 姓名非空，长度2-20位，不包含特殊字符！";
										$parent
												.append("<span class='msg onError'>"
														+ errorMsg + "</span>");
									} else {
										var okMsg = " 输入正确";
										$parent
												.append("<span class='msg onSuccess'>"
														+ okMsg + "</span>");
									}
								}
								//验证手机号
								if ($(this).is("#mobile")) {
									var mobileVal = $.trim(this.value);
									var regMobile = /^1[3|4|5|7|8][0-9]{9}$/;
									if (mobileVal == ""
											|| !regMobile.test(mobileVal)) {
										var errorMsg = " 请输入有效的11位手机号码！";
										$parent
												.append("<span class='msg onError'>"
														+ errorMsg + "</span>");
									} else {
										var okMsg = " 输入正确";
										$parent
												.append("<span class='msg onSuccess'>"
														+ okMsg + "</span>");
									}
								}
								//验证密码
								if ($(this).is("#psd")) {
									var psdVal = $.trim(this.value);
									var regPsd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
									if (psdVal == "" || !regPsd.test(psdVal)) {
										var errorMsg = " 密码为6-20位字母、数字的组合！";
										$parent
												.append("<span class='msg onError'>"
														+ errorMsg + "</span>");
									} else {
										var okMsg = " 输入正确";
										$parent
												.append("<span class='msg onSuccess'>"
														+ okMsg + "</span>");
									}
								}
							}).keyup(function() {
						//triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点
						$(this).triggerHandler("blur");
					}).focus(function() {
						$(this).triggerHandler("blur");
					});

			//点击重置按钮时，通过trigger()来触发文本框的失去焦点事件
			$("#btnSubmit").click(function() {
				//trigger 事件执行完后，浏览器会为submit按钮获得焦点
				$("form .required:input").trigger("blur");
				var numError = $("form .onError").length;
				if (numError) {
					return false;
				}
				alert('注册成功！')

			});
		})
	</script>
</body>
</html>
